import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { DetecLang, ChangeLang } from "@/api/modules/Common";
export function useSetLang() {
  const { locale } = useI18n();
  // 创建一个响应式变量来控制弹出框显示与否
  const showPopover = ref<boolean>(false);

  // 定义 actions 数组，存储语言选项的图标和文本信息
  interface ActionItem {
    icon: string;
    text: string;
    lang: string;
  }

  const actions: ActionItem[] = [
    { icon: "china.png", text: "中文", lang: "zh-cn" },
    { icon: "englist.png", text: "英语", lang: "en-us" },
    { icon: "jp.png", text: "日语", lang: "jp" },
    { icon: "ru.png", text: "俄语", lang: "ru" },
    { icon: "th.png", text: "泰语", lang: "th" },
    { icon: "rm.png", text: "马来语", lang: "my" },
  ];
  // 选择语言
  const setLang = (lang) => {
    locale.value = lang;
    localStorage.setItem("lang", lang);
    showPopover.value = false;
    getChangeLang(lang);
  };

  // 检测当前语言
  const getDetecLang = async () => {
    try {
      const res = await DetecLang();
      console.log(res);
    } catch (err) {
      console.log(err);
    }
  };
  const getChangeLang = async (locale) => {
    try {
      const res = await ChangeLang({
        lang: locale,
      });
      console.log(res);
    } catch (err) {
      console.log(err);
    }
  };
  return {
    showPopover,
    locale,
    actions,
    setLang,
    getDetecLang,
  };
}
